<template>
	<view class="content">
		<view @click="back()" class="return">
			<u-icon name="arrow-left" color="#fff" size="44"></u-icon>
		</view>
		<u-swiper :list="goods.goods_detail.images" :autoplay="true" height="750"></u-swiper>
		<!-- <view
			style="display: flex; align-items: center;justify-content: space-between;padding: 20rpx 40rpx;background-color: #fff;">
			<view style="display: flex;flex-direction: row;align-items:baseline;">
				<price size="36rpx" v-if="skuPrice != ''" :price="skuPrice"></price>
				<view style="margin-left: 20rpx;">
					<view style="text-decoration: line-through;font-size: 20rpx;color: #999;">原价
						{{goods.original_price}}
					</view>
				</view>
			</view>
			<view style="color: #999;font-size: 24rpx;">已销 {{goods.sales}} 件</view>
		</view> -->
		<view style="background-color: #fff;padding-bottom: 20rpx;">
			<view
				style="background-image: url(https://img.koalalf.com/index/miaosha-bg.png); width: 750rpx; height: 103rpx;background-size: 100%;position: relative;">
				<view style="position: absolute;top: 12rpx;left: 230rpx;">
					<price size="60rpx" leftSize="24rpx" textColor="#fff" v-if="skuPrice != ''" :price="skuPrice">
					</price>
				</view>
				<view
					style="position: absolute;top: 56rpx;font-size: 20rpx;left: 486rpx;font-weight: bold;color: #F3141B;width: 176rpx;display: flex;justify-content: space-around;">
					<text>{{shengyuH}}</text>
					<text style="margin: 0 50rpx;">{{shengyuM}}</text>
					<text>{{shengyuS}}</text>
				</view>
			</view>
		</view>
		<view style="padding-bottom: 20rpx;background-color: #fff;">
			<view class="goods-item-title" style="background-color: #fff;">
				<u-icon style="margin-right: 4rpx;" size="34" custom-prefix="gewu" name="ziying">
				</u-icon>
				{{goods.title}}
			</view>
		</view>

		<view
			style="display: flex;justify-content: space-between;padding: 40rpx;background-color: #fff;margin-top: 20rpx;"
			@click="guigePopupShowFn()">
			<text style="margin-right: 40rpx; font-weight: bold;">已选</text>
			<view style="flex: 1;padding-right: 20rpx;">{{skuText}}</view>
			<u-icon style="margin-right: 4rpx;" size="40" custom-prefix="gewu" name="diandiandian">
			</u-icon>
		</view>

		<view style="background-color: #fff; margin-bottom: 100rpx;margin-top: 20rpx;">
			<view style="display: flex;flex-direction: row;align-items: center;margin-bottom: 20rpx;padding: 40rpx;">
				<view style="background-color: #d9501b; width: 8rpx; height: 30rpx;margin-right: 20rpx;"></view>
				<text style="font-size: 32rpx; font-weight: bold;">图文详情</text>
			</view>
			<view style="font-size: 0;">
				<u-image v-for="(item,index) in goods.goods_detail.detail_pics" mode="widthFix" :key="index"
					width="100%" :src="item.img"></u-image>
			</view>
		</view>

		<view class="navigation">
			<view class="left">
				<view class="item" @click="returnIndex()">
					<u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">首页</view>
				</view>
				<!-- <view class="item">
					<u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">店铺</view>
				</view> -->
				<view class="item ">
					<!-- <u-badge class="car-num" :count="9" type="error" :offset="[-3, -6]"></u-badge> -->
					<u-icon name="star" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">收藏</view>
				</view>
			</view>
			<view class="right">
				<view class="cart btn u-line-1" @click="createCarts">
					加入购物车</view>
				<view class="buy btn u-line-1" @click="createOrder">立即购买
				</view>
			</view>
		</view>
		<u-modal v-model="modelShow" :show-title="false" :show-cancel-button="true" cancel-text="关闭" confirm-text="复制文案"
			@confirm="copy(goods.title + '\r原件：￥'+ goods.original_price + '\r券后价:￥'+ goods.actual_price)">
			<view class="slot-content">
				<u-image width="400rpx" mode="widthFix" :src="shareImage"></u-image>
				<text style="font-size: 24rpx; color: #F29100;">长按图片发送给朋友或保存</text>
			</view>
		</u-modal>

		<u-popup v-model="guigePopupShow" mode="bottom">
			<view style="margin-bottom: 200rpx;padding: 40rpx;">
				<view style="margin-bottom: 40rpx;display: flex;flex-direction: row;align-items: flex-end;">
					<u-image mode="widthFix" :key="index" width="200rpx" :src="skuImage"></u-image>
					<view style="margin-left: 20rpx;">
						<price size="36rpx" v-if="skuPrice != ''" :price="skuPrice"></price>
						<text style="font-size: 22rpx; color: #ccc;">已选:{{skuText}}</text>
					</view>
				</view>
				<u-line color="#f1f1f1" length="100%" />
				<view v-for="(item, index) in goods.goods_sku_name" :key="index" style="margin-top: 40rpx;">
					<view style="font-size: 32rpx; font-weight: bold;margin-bottom: 40rpx;">{{item.sku_name}}</view>
					<view style="display: flex;flex-direction: row;flex-wrap: wrap;">
						<view @click="selectAttr(item, skuItem)" v-for="(skuItem, skuIndex) in item.attr"
							:key="skuIndex">
							<view v-if="skuItem.select == 1"
								style="margin-bottom: 20rpx;background-color: #FA3534;padding: 10rpx 20rpx;margin-right: 20rpx;border-radius: 10rpx;color: #fff;">
								{{skuItem.attr}}
							</view>
							<view v-if="skuItem.select == 0"
								style="margin-bottom: 20rpx;background-color: #f5f5f5;padding: 10rpx 20rpx;margin-right: 20rpx;border-radius: 10rpx;">
								{{skuItem.attr}}
							</view>
						</view>
					</view>
				</view>
				<view style="margin-top: 40rpx;">
					<view style="font-size: 32rpx; font-weight: bold;margin-bottom: 40rpx;">数量</view>
					<view style="display: flex;flex-direction: row;flex-wrap: wrap;">
						<u-number-box min=1 v-model="numberValue" @change="valChange"></u-number-box>
					</view>
				</view>
			</view>

			<view class="navigation" style="z-index: 100;">
				<view v-if="guigePopupBottom == 0" class="right" style="width: 100%;justify-content: space-around">
					<view class="cart btn u-line-1" style="width: 30%;text-align: center;" @click="createCarts">加入购物车
					</view>
					<view class="buy btn u-line-1" style="width: 30%;text-align: center;" @click="createOrder">立即购买
					</view>
				</view>
				<view v-if="guigePopupBottom == 1" class="right" style="width: 100%;justify-content: space-around">
					<view class="cart-confirm btn u-line-1" style="width: 80%;text-align: center;"
						@click="confirmCreateCarts">确认</view>
				</view>
				<view v-if="guigePopupBottom == 2" class="right" style="width: 100%;justify-content: space-around">
					<view class="cart-confirm btn u-line-1" style="width: 80%;text-align: center;"
						@click="confirmCreateOrder">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import imagesUrl from '../../common/images.js'
	import price from "../../components/price.vue"

	export default {
		components: {
			price
		},
		data() {
			return {
				goods: null,
				images: {},
				guigePopupShow: false,
				modelShow: false,
				shareImage: '',
				skuImage: '',
				skuPrice: '',
				skuAttrPath: '',
				numberValue: 1,
				skuText: "请选择规格",
				skuId: 0,
				guigePopupBottom: 0,
				
				shengyuD: '00', 
				shengyuH: '00', 
				shengyuM: '00', 
				shengyuS: '00'
			}
		},
		onLoad({
			id,
			type
		}) {
			let that = this;
			this.$u.api.goodsInfo({
				goods_id: id,
				type
			}).then(res => {
				for (let i = 0; i < res.goods_sku_name.length; i++) {
					for (let j = 0; j < res.goods_sku_name[i].attr.length; j++) {
						res.goods_sku_name[i].attr[j].select = 0
					}
					res.goods_sku_name[i].attr[0].select = 1
				}
				that.goods = res
				that.skuImage = res.pict_url
				that.skuPrice = res.actual_price

				that.skuValue()
				
				if(that.goods.seckill == 2 && that.goods.seckill_end_time){
					setInterval(function(){
						that.shengyuTime(that.goods.seckill_end_time)
					}, 1000)
				}
			})

			this.images = imagesUrl.goods
		},
		methods: {
			createOrder() {
				let that = this;
				if (that.goods.goods_sku.length > 0) {
					that.guigePopupShow = true
					that.guigePopupBottom = 2
				} else {
					this.confirmCreateOrder()
				}
			},
			confirmCreateOrder() {
				let that = this;
				this.$u.api.createOrder({
					goods_sku_id: that.skuId,
					goods_id: that.goods.id,
					quantity: that.numberValue
				}).then(res => {
					that.guigePopupShow = false
					that.$u.route({
						url: "pages/orders/createOrder",
						params: {
							data: JSON.stringify(res)
						}
					})
				})
			},
			createCarts() {
				let that = this;
				let cartsQuantity = that.goods.carts ? that.goods.carts.quantity : 0

				if (that.goods.goods_sku.length > 0) {
					that.guigePopupShow = true
					that.guigePopupBottom = 1
				} else {
					this.confirmCreateCarts()
				}

			},
			confirmCreateCarts() {
				let that = this;
				this.$u.api.createCarts({
					goods_id: that.goods.id,
					goods_sku_id: that.skuId,
					quantity: that.numberValue + cartsQuantity
				}).then(res => {
					that.guigePopupShow = false
					uni.$emit('changeCarts', {
						msg: '更新购物车'
					});
				})
			},
			valChange(e) {
				this.numberValue = e.value
				this.skuValue()
			},
			selectAttr(item, selectAttr) {
				for (let i = 0; i < item.attr.length; i++) {
					item.attr[i].select = 0
					if (item.attr[i].id == selectAttr.id) {
						item.attr[i].select = 1
					}
				}

				for (let i = 0; i < this.goods.goods_sku_name.length; i++) {
					if (this.goods.goods_sku_name[i].id == item.id) {
						this.goods.goods_sku_name[i] = item
					}
				}

				this.skuValue()
			},

			skuValue() {
				this.skuAttrPath = ''
				this.skuText = ''
				for (let i = 0; i < this.goods.goods_sku_name.length; i++) {

					this.skuText += this.goods.goods_sku_name[i].sku_name + ":"

					for (let j = 0; j < this.goods.goods_sku_name[i].attr.length; j++) {
						if (this.goods.goods_sku_name[i].attr[j].select == 1) {
							this.skuText += this.goods.goods_sku_name[i].attr[j].attr + ','
							this.skuAttrPath += this.goods.goods_sku_name[i].attr[j].id + ','
							if (this.goods.goods_sku_name[i].attr[j].image) {
								this.skuImage = this.goods.goods_sku_name[i].attr[j].image
							}
						}
					}
				}

				this.skuAttrPath = this.skuAttrPath.slice(0, this.skuAttrPath.length - 1)
				this.skuText += "数量:" + this.numberValue + "件"

				for (let i = 0; i < this.goods.goods_sku.length; i++) {
					if (this.goods.goods_sku[i].attr_path == this.skuAttrPath) {
						this.skuId = this.goods.goods_sku[i].id
						this.skuPrice = this.goods.goods_sku[i].selling_price
					}
				}
			},

			guigePopupShowFn() {
				this.guigePopupShow = true
			},
			modelShowFn(goodsId, type, searchId) {
				let that = this;
				this.$u.api.shareImage({
					goods_id: goodsId,
					type,
					search_id: searchId
				}).then(res => {
					that.shareImage = res
					that.modelShow = true
				})
			},
			back() {
				this.$u.route({
					type: 'navigateBack'
				})
			},
			copy(text) {
				let that = this;
				uni.setClipboardData({
					data: text,
					success: function() {},
				});
			},

			returnIndex() {
				this.$u.route({
					type: 'switchTab',
					url: 'pages/index/index'
				})
			},

			onShareAppMessage(res) {
				let title = "[好友推荐]" + this.goods.title
				if (res.from === 'button') { // 来自页面内分享按钮
					return {
						title: title,
						path: '/pages/index/selfGoodsDetail?share_key=' + this.share_key + "&id=" + this.goods.id +
							"&type=" + this.goods.type,
						imageUrl: this.goods.goods_detail.share_image
					}
				}
				return {
					title: title,
					path: '/pages/index/selfGoodsDetail?share_key=' + this.share_key + "&id=" + this.goods.id + "&type=" +
						this.goods.type,
					imageUrl: this.goods.goods_detail.share_image
				}
			},
			
			shengyuTime(date){
				let endTime = new Date(date).getTime()
				let nowTime = new Date().getTime()
				
				let shenyu = endTime - nowTime
				let shengyuD = parseInt(shenyu / (60 * 60 * 24 * 1000)); //转换为天
				
				let D = parseInt(shenyu) - parseInt(shengyuD * 60 * 60 * 24 * 1000); //除去天的毫秒数
				
				let shengyuH = parseInt(D / (60 * 60 * 1000)); //除去天的毫秒数转换成小时
				
				let H = D - shengyuH * 60 * 60 * 1000; //除去天、小时的毫秒数
				
				let shengyuM = parseInt(H / (60 * 1000)); //除去天的毫秒数转换成分钟
				
				let M = H - shengyuM * 60 * 1000; //除去天、小时、分的毫秒数
				
				let shengyuS = parseInt((shenyu - shengyuD * 60 * 60 * 24 * 1000 - shengyuH * 60 * 60 * 1000 - shengyuM * 60 * 1000) /
					1000); //除去天、小时、分的毫秒数转化为秒
					
				this.shengyuD = shengyuD;
				this.shengyuH = shengyuH < 10 ? '0'+shengyuH: shengyuH;
				this.shengyuM = shengyuM < 10 ? '0'+shengyuM: shengyuM;;
				this.shengyuS = shengyuS < 10 ? '0'+shengyuS: shengyuS;;
			}
		}
	}
</script>

<style lang="scss" scoped>
	body {
		background-color: #f5f5f5;
		font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
	}

	.content {
		background-color: #f5f5f5;
	}

	.slot-content {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
		flex-direction: column;
	}

	.return {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		background-color: rgba($color: #000000, $alpha: 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 40rpx;
		top: 98rpx;
		z-index: 1;
	}

	.quan-color {
		background-image: -webkit-linear-gradient(bottom, #EAC99B, #EAC99B, #E3B87D);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.goods-item-title {
		padding: 0 40rpx;
		font-size: 32rpx;
		font-weight: bold;
		height: 86rpx;
		overflow: hidden;
	}

	.solgn {
		display: flex;
		flex-direction: row;
		background-color: #fff;
		padding: 40rpx 40rpx;
		align-items: flex-start;
	}

	.navigation {
		position: fixed;
		width: 100%;
		bottom: 0;
		display: flex;
		margin-top: 100rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;
		justify-content: space-between;
		padding-bottom: 40rpx;

		.left {
			display: flex;
			font-size: 20rpx;

			.item {
				margin: 0 30rpx;

				&.car {
					text-align: center;
					position: relative;

					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;
			padding-right: 20rpx;

			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}

			.cart {
				background-color: #ed3f14;
				margin-right: 30rpx;
			}

			.cart-confirm {
				background-color: #ed3f14;
				margin-right: -20rpx;
			}

			.buy {
				background-color: #ff7900;
			}
		}
	}
</style>
